<template>
  <m-container>
    <m-cell-group>
      <view class="df aic scan">
        <view class="img">
          <image src="@/static/pall.png"></image>
        </view>

        <text class="title"> 托盘编号： {{ options.palletCode }} </text>
      </view>
    </m-cell-group>
    <m-cell-group>
      <m-cell label="当前托盘上的产品" size="xs" />
      <view class="over">
        <view
          class="item df aic"
          v-for="(item, index) in list"
          :key="index"
          style="background-color: #f2f7fd; margin-bottom: 20rpx; padding-bottom: 16rpx"
        >
          <image src="@/static/icon9.png" mode="scaleToFill" class="icon_box" />
          <view class="right">
            <view class="item">
              <text class="title">零件图号</text>
              <text>{{ item.partNo }}</text>
            </view>
            <view class="item">
              <text class="title">剩余包数</text>
              <text>{{ item.packageQuantity }}</text>
            </view>
          </view>
        </view>
      </view>
    </m-cell-group>

    <m-fixed>
      <view class="df aic jcsb">
        <m-button width="30%" size="lg" @click="handleBack" plain background="#fff"> 取消</m-button>
        <m-button width="68%" size="lg" @click="handleClickNext" :disabled="loading" :loading="loading">
          回库
        </m-button>
      </view>
    </m-fixed>
  </m-container>
</template>

<script>
import { imsStockOutWork, toStorageLocation, storageLocationDetails } from '@/api/modules/out-work'
import { router } from '@/router'
import { showModal } from '@/hooks'

export default {
  data() {
    return {
      loading: false,
      options: {},
      list: [],
    }
  },
  async onLoad(options) {
    this.options = options
    this.fetchData(options)
  },
  methods: {
    async fetchData({ palletCode, outOrderId, outWorkId }) {
      const { rows } = await imsStockOutWork({ outOrderId })
      this.info = rows.find((item) => item.outWorkId === Number(outWorkId))
      const { data } = await storageLocationDetails({ palletCode })
      this.list = data
    },
    handleBack() {
      router.back(1)
    },
    handleClickNext() {
      this.loading = true
      showModal({
        title: '货完成/回库提示',
        content: '请问您确认是否要回库？',
        showCancelButton: true,
        slot: true,
        confirm: async () => {
          const params = {
            ...this.info,
            list: this.list,
            toStorageLocationType: 1,
          }
          await toStorageLocation(params)
          this.loading = false
          uni.showToast({
            title: '回库成功',
            icon: 'none',
            duration: 2000,
          })
          this.handleBack()
        },
        cancel: () => {
          this.loading = false
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.scan {
  padding: 20rpx 25rpx;
  .img {
    width: 80rpx;
    height: 80rpx;
    background: #248dfa;
    border-radius: 50%;
    box-shadow: 0rpx 0rpx 60rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  image {
    width: 53rpx;
    height: 34rpx;
  }
  .title {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    display: flex;
    color: #16b0f3;
    margin-left: 30rpx;
    &.active {
      color: #333;
    }
  }
}

.over {
  max-height: 450rpx;
  overflow: auto;
  margin: 0 20rpx;
  .item {
    display: flex;
    color: #333;
    font-size: 30rpx;
    padding: 15rpx 20rpx 0rpx;
    flex: 1;
    .title {
      color: #333;
      width: 180rpx;
      font-size: 26rpx;
    }
  }
  .icon_box {
    width: 86rpx;
    height: 86rpx;
    margin-right: 10rpx;
  }
}
</style>
